<!-- echarts模板，有局部刷新需要在mounted自行开启 -->
<template>
  <div>
    <el-card
      shadow="never"
      class="rounded-md"
      :body-style="{ padding: '10px' }"
    >
      <template #header>
        <div class="flex align-center justify-between">
          <span> 统计订单 </span>
          <div>
            <el-check-tag
              type="warning"
              :checked="true"
              style="margin-right: 8px"
              >近一个月</el-check-tag
            >
            <el-check-tag :checked="true" style="margin-right: 8px"
              >近一周</el-check-tag
            >
            <el-check-tag :checked="true" style="margin-right: 8px"
              >近三天</el-check-tag
            >
          </div>
        </div>
      </template>

      <!--高度一定要写-->
      <div ref="refChart" style="width: 100%; height: 400px"></div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted, onBeforeUnmount } from "vue";
// @ts-ignore
import skin from "@/assets/theme/echarts/skin.js";
// import { useResizeObserver } from '@vueuse/core'
// import { randomNum } from '@/utils/koi';
// 获取ref
let refChart = ref<any>();
let chartInstance = ref();
onMounted(() => {
  // 图表初始化
  initChart();
  // 获取接口数据
  getData();
  // 调用Echarts图表自适应方法
  screenAdapter();
  // Echarts图表自适应
  window.addEventListener("resize", screenAdapter, { passive: false });
  // 局部刷新定时器
  // getDataTimer();
});

onBeforeUnmount(() => {
  // 销毁Echarts图表
  chartInstance.value.dispose();
  chartInstance.value = null;
  // Echarts图表自适应销毁
  window.removeEventListener("resize", screenAdapter);
});

const initChart = () => {
  // 覆盖默认主题
  echarts.registerTheme("myTheme", skin);
  // 定义实例
  chartInstance.value = echarts.init(refChart.value, "myTheme");
  const initOption = {
    title: {},
    tooltip: {},
    yAxis: {
      type: "value",
    },
    xAxis: {
      type: "category",
    },
    series: [
      {
        type: "bar",
        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
      },
    ],
  };
  // 图表初始化配置
  chartInstance.value.setOption(initOption);
};
const getData = () => {
  // 调用接口方法
  // listTenDayData().then(res => {
  //       allData = res.data;
  //       updateChart();
  //       //console.log("ALLDATA->"+JSON.stringify(allData.pcsSum));
  //       // echarts查不到数据，将初始化echarts的方法全部放置到接口方法中即可。
  // })
  // 获取服务器的数据, 对allData进行赋值之后, 调用updateChart方法更新图表
  //console.log("ALLDATA->",JSON.stringify(res.data))
  //console.log("ALLDATA->",JSON.stringify(allData))
  updateChart();
};
const updateChart = () => {
  // 处理图表需要的数据
  const dataOption = {
    title: {
      text: "ECharts 入门示例",
    },
    xAxis: {
      // x轴刻度文字
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
      },
    ],
  };
  // 图表数据变化配置
  chartInstance.value.setOption(dataOption);
};

const screenAdapter = () => {
  let titleFontSize = Math.round(refChart.value.offsetWidth / 100);
  const adapterOption = {
    title: {
      textStyle: {
        fontSize: titleFontSize,
      },
    },
    // 圆点分类标题
    legend: {
      textStyle: {
        fontSize: titleFontSize,
      },
    },
    xAxis: {
      //  改变x轴字体颜色和大小
      axisLabel: {
        textStyle: {
          fontSize: Math.round(titleFontSize * 1.2),
        },
      },
    },
    yAxis: {
      //  改变y轴字体颜色和大小
      axisLabel: {
        textStyle: {
          fontSize: Math.round(titleFontSize * 1.2),
        },
      },
    },
    series: [
      // 双柱的话复制粘贴一份即可
      {
        // 圆柱的宽度
        barWidth: Math.round(titleFontSize * 1.8),
        itemStyle: {
          //颜色样式部分
          normal: {
            label: {
              textStyle: {
                fontSize: Math.round(titleFontSize), //字体大小
              },
            },
          },
        },
      },
    ],
  };
  // 图表自适应变化配置
  chartInstance.value.setOption(adapterOption);
  // 手动的调用图表对象的resize 才能产生效果
  chartInstance.value.resize();
};
// 定时器
// const getDataTimer = () => {
//   dataTimer.value = setInterval(() => {
//     // 执行刷新数据的方法
//     getData();
//     //console.log("Hello World")
//   }, 3000)
// }
</script>

<style lang="scss" scoped></style>
@/assets/theme/echarts/skin.js
